let refreshTimeId;
let submitTimeId;
let courseId = 0; // 课件ID
let readTime = 0; // 本次阅读时长（秒）
let minReadMinute = 0; // 最少阅读时间（分钟）
let readSuccessMinute = 0; // 已经完成阅读（分钟）
let openSelectPic = false; // 是否开启相片选择功能
let useWeixinCamera = true; // 是否使用微信的拍照功能.不使用微信则使用HTML5拍照功能。但HTML5的拍照功能无法自动弹出
let isUploadImgBase64 = false; // 是否上传base64图片数据.不上传base64则上传图片文件
let html = `
        <div id="time_div" style="position:fixed;left:0;bottom:0;width:100%;background-color:#eeeeee;
          font-size:1rem;padding:1rem;border-top: 1px solid #cccccc;">
          <div>
            <input type="file" id="fileInput" accept="image/*" capture="camera" onchange="beforeUpdate()" style="display: none;" />
            <button style="float:right;margin-right:3rem;font-size:1rem;padding:1rem;" onclick="exitStudy()" >退出当前学习</button>
            <div>要求学习时长：<span id="minReadMinuteSpan">0分</span><div>
            <div>剩余学习时长：<span id="readSuccessMinuteSpan">0分</span></div>
            <div>本次学习：<span id="readTimeSpan">0分0秒</span></div>
          </div>
        </div>
    `;

// 初始化页面
function initHtml(){
  // 需要添加 meta 要不页面字体太小
  let newMeta = document.createElement('meta');
  newMeta.content = 'width=device-width, initial-scale=0.9';
  newMeta.name = 'viewport';
  document.getElementsByTagName('head')[0].appendChild(newMeta);

  var body = document.getElementsByTagName('body')[0];
  body.style.marginBottom = '150px';

  // 添加底部的div
  let div = document.createElement("div");
  div.innerHTML = html;
  document.body.appendChild(div);
}

// 退出当前学习
function exitStudy(){
  window.location.href="/weixin/tpl/student/read_course.bu?id=" + courseId;
}

// 得到url上的参数
function getQueryVariable(variable){
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

// 刷新当前学习时间
function refreshReadTime(){
  readTime = readTime + 1;
  let m = parseInt(readTime / 60);
  let s = readTime - (m * 60);
  let readTimeSpan = document.getElementById("readTimeSpan");
  readTimeSpan.innerText = m + "分" + s + "秒";

  let minReadMinuteSpan = document.getElementById("minReadMinuteSpan");
  minReadMinuteSpan.innerText = minReadMinute + "分";

  let readSuccessMinuteSpan = document.getElementById("readSuccessMinuteSpan");
  if(readSuccessMinute >= minReadMinute){
    readSuccessMinuteSpan.innerText = "已完成";
  } else {
    readSuccessMinuteSpan.innerText = (minReadMinute - readSuccessMinute) + "分";
  }
}

// 提交阅读时长
function submitReadMinute(){

  if(courseId > 0){
    let data = {};
    data.courseId = courseId;

    axios.post('/weixin/student/edit/student_course_study!add_read_minute.bu', data)
      .then(function (response) {
        if (response.data.code > 0) {
          // 获取成功
          readSuccessMinute = readSuccessMinute + 1;
          //vant.Notify({ type: 'success', message: response.data.msg });
        } else if(-90183 === response.data.code){
          // 需要拍照
          Toast("请拍照验证您的身份", 3000);

          // 延时执行，调出拍照设备
          setTimeout(function(){
            if(useWeixinCamera){
              showCameraPhotographVerify();
            } else {
              showHTML5CameraPhotographVerify();
            }
          },1000);

        }
      })
      .catch(function (error) {
      });
  }

}

// 自动执行，读取基础数据
function loadData() {

  // 获取阅读时间参数
  courseId = getQueryVariable("id"); // 获取url上的参数
  if(courseId > 0){
    axios.get('/weixin/student/' + courseId + '/show/student_course!read_time.bu')
      .then(function (response) {
        console.log(response);
        //Toast("读取到的数据:" + JSON.stringify(response), 6000);
        //Toast("读取到的数据：空", 6000);
        if (response.data.code > 0) {
          // 获取成功
          let jsonData = response.data.bundle;
          minReadMinute = jsonData.min_read_minute;
          readSuccessMinute = jsonData.read_minute;
        } else {
          // 错误
        }
      })
      .catch(function (error) {
      });
  } else {
    let timeDiv = document.getElementById("time_div");
    timeDiv.style.display = 'none';
  }

};


// 显示相机，开启拍照验证
function showCameraPhotographVerify(){

  // 开启相机，停止计时
  clearInterval(refreshTimeId);
  clearInterval(submitTimeId);

  let sourceType = ['camera']; // 可以指定来源是相册(album)还是相机(camera)，默认二者都有
  if(openSelectPic){
    sourceType = ['camera', 'album']; // 可以指定来源是相册(album)还是相机(camera)，默认二者都有
  }

  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图(original)还是压缩图(compressed)，默认二者都有
    sourceType: sourceType, // 可以指定来源是相册(album)还是相机(camera)，默认二者都有
    success: function (res) {
      var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
      //vant.Notify({ type: 'success', message: '选择了图片：' + localIds });

      if(isUploadImgBase64){
        // 获取图片文件本地数据（bae64）,然后上传至服务器进行对比
        getLocalImgDataAndUpload(localIds[0].toString());
      } else {
        // 延时执行图片上传操作
        setTimeout(function(){
          // 上传图片文件至微信服务器
          upImageToWeixinService(localIds[0].toString(), 2)
        },1000);
      }
    }
  });
}

// 图片上传至微信服务器
function upImageToWeixinService(uri, step){
  wx.uploadImage({
    localId: uri, // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
      var serverId = res.serverId; // 返回图片的服务器端ID
      //vant.Notify({ type: 'success', message: '图片上传成功：' + serverId });

      Toast("正在进行人脸比对，请稍后...", 6000);
      downWeixinImgAndVerify(serverId);

    },
    fail: function(err) {
      // 失败时候的回调函数

      openSelectPic = true;  // 开启从相册选择相片功能

      Toast('图片上传失败，请查看是否禁用了微信的存储权限。错误:' + JSON.stringify(err), 6000);
    }
  });
}

// 下载微信媒体文件,同时认证两相片是否同一个人
function downWeixinImgAndVerify(mediaId){

  let data = {};
  data.courseId = courseId;
  data.mediaId = mediaId;

  //alert("data.studentId:" + data.studentId + " data.courseId:" + data.courseId + " data.mediaId:" + data.mediaId);

  axios.post('/guest/weixin/down_image_to_study_verify.bu', data)
    .then(function (response) {
      if (response.data.code > 0) {
        Toast("验证通过", 1000);
        // 重新计时
        // 每秒执行一次，刷新当前阅读时长
        refreshTimeId = setInterval("refreshReadTime()", 1000);
        // 循环执行记录阅读时长
        submitTimeId = setInterval("submitReadMinute()",60000);
      } else {
        Toast("验证失败，请重新拍照", 3000);
        // 需要重新拍照
        // 延时执行，调出拍照设备
        setTimeout(function(){
          if(useWeixinCamera){
            showCameraPhotographVerify();
          } else {
            showHTML5CameraPhotographVerify();
          }
        },1000);
      }
    })
    .catch(function (error) {
      Toast("网络异常", 1000);
      //如果网络异常的话，就先让它继续执行吧
      // 每秒执行一次，刷新当前阅读时长
      refreshTimeId = setInterval("refreshReadTime()", 1000);
      // 循环执行记录阅读时长
      submitTimeId = setInterval("submitReadMinute()",60000);
    });
}

// 获取图片本地base64数据，然后上传至服务器
function getLocalImgDataAndUpload(localId){
  wx.getLocalImgData({
    localId: localId, // 图片的localID
    success: function (res) {
      var localData = res.localData; // localData是图片的base64数据，可以用img标签显示

      var data = {};
      data.courseId = courseId;
      //安卓需要在得到的base64前面加上   data:image/jpeg;base64,
      //苹果则需要替换掉前面的 data:image/jgp;base64 为 data:image/jpeg;base64
      if (localData.indexOf('data:image') == 0) {
        data.imgBase64 = localData.replace('image/jgp;', 'image/jpeg;');
      } else {
        data.imgBase64 = "data:image/jpeg;base64," + localData
      }

      Toast("正在进行图片上传并人脸比对，请稍后...", 6000);

      axios.post('/guest/weixin/base64_image_to_study_verify.bu', data)
        .then(function (response) {
          if (response.data.code > 0) {
            Toast("验证通过", 1000);
            // 重新计时
            // 每秒执行一次，刷新当前阅读时长
            refreshTimeId = setInterval("refreshReadTime()", 1000);
            // 循环执行记录阅读时长
            submitTimeId = setInterval("submitReadMinute()",60000);
          } else {
            Toast(response.data.msg, 3000);
            // 需要重新拍照
            // 延时执行，调出拍照设备
            setTimeout(function(){
              if(useWeixinCamera){
                showCameraPhotographVerify();
              } else {
                showHTML5CameraPhotographVerify();
              }
            },1000);
          }
        })
        .catch(function (error) {
          Toast("网络异常", 1000);
          //如果网络异常的话，就先让它继续执行吧
          // 每秒执行一次，刷新当前阅读时长
          refreshTimeId = setInterval("refreshReadTime()", 1000);
          // 循环执行记录阅读时长
          submitTimeId = setInterval("submitReadMinute()",60000);
        });
    }
  });
}

// 开启HTML5拍照功能呢
function showHTML5CameraPhotographVerify(){

  // 开启相机，停止计时
  clearInterval(refreshTimeId);
  clearInterval(submitTimeId);

  return document.getElementById("fileInput").click();
  //document.querySelector('#fileInput').click();
}

// 选择了文件（拍照）后触发
function beforeUpdate(){
  let fileObj = document.getElementById('fileInput').files[0];
  const img = new Image();
  const reader = new FileReader();
  reader.readAsDataURL(fileObj)
  reader.onload = function(e) {
    img.src = e.target.result;
    img.onload = function() {
      let canvas = compressImg(img, 'image/jpeg', 640, 640);
      let data = {};
      data.courseId = courseId;
      data.imgBase64 = canvas.toDataURL('image/jpeg');

      console.log(data);

      Toast("正在上传照片并进行人脸比对，请稍后...", 6000);

      // 提交人脸识别相片
      axios.post('/guest/weixin/base64_image_to_study_verify.bu', data)
        .then(function (response) {
          if (response.data.code > 0) {
            Toast("验证通过", 1000);
            // 重新计时
            // 每秒执行一次，刷新当前阅读时长
            refreshTimeId = setInterval("refreshReadTime()", 1000);
            // 循环执行记录阅读时长
            submitTimeId = setInterval("submitReadMinute()",60000);
          } else {
            Toast("验证失败，请重新拍照", 3000);
            // 需要重新拍照
            // 延时执行，调出拍照设备
            setTimeout(function(){
              if(useWeixinCamera){
                showCameraPhotographVerify();
              } else {
                showHTML5CameraPhotographVerify();
              }
            },1000);
          }
        })
        .catch(function (error) {
          Toast("网络异常", 1000);
          //如果网络异常的话，就先让它继续执行吧
          // 每秒执行一次，刷新当前阅读时长
          refreshTimeId = setInterval("refreshReadTime()", 1000);
          // 循环执行记录阅读时长
          submitTimeId = setInterval("submitReadMinute()",60000);
        });

    }
    img.onerror = function(e) {
      Toast("相片压缩失败!", 1000);
    }
  }
  reader.onerror = function(e) {
    Toast("相片压缩失败!", 1000);
  }

}

// 自定义提示框
function Toast(msg, duration){
  duration=isNaN(duration)?3000:duration;
  let m = document.createElement('div');
  m.innerHTML = msg;
  m.style.cssText="max-width:60%;min-width: 150px;padding:0 14px;color: rgb(255, 255, 255);text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
  document.body.appendChild(m);
  setTimeout(function() {
    var d = 0.5;
    m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
    m.style.opacity = '0';
    setTimeout(function() { document.body.removeChild(m) }, d * 1000);
  }, duration);
}

/**
 * 压缩图片,返回图片画板（canvas）
 * @param img 被压缩的img对象
 * @param type 压缩后转换的文件类型(如: image/png )
 * @param mx 触发压缩的图片最大宽度限制
 * @param mh 触发压缩的图片最大高度限制
 */
function compressImg(img, type, mx, mh) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const { width: originWidth, height: originHeight } = img;
  // 最大尺寸限制
  const maxWidth = mx;
  const maxHeight = mh;
  // 目标尺寸
  let targetWidth = originWidth;
  let targetHeight = originHeight;
  if (originWidth > maxWidth || originHeight > maxHeight) {
    if (originWidth / originHeight > 1) {
      // 宽图片
      targetWidth = maxWidth;
      targetHeight = Math.round(maxWidth * (originHeight / originWidth));
    } else {
      // 高图片
      targetHeight = maxHeight;
      targetWidth = Math.round(maxHeight * (originWidth / originHeight));
    }
  }
  canvas.width = targetWidth;
  canvas.height = targetHeight;
  context.clearRect(0, 0, targetWidth, targetHeight);
  // 图片绘制
  context.drawImage(img, 0, 0, targetWidth, targetHeight);
  return canvas;
}

// 初始化页面 DIV
initHtml();

// 加载数据
loadData();

// 每秒执行一次，刷新当前阅读时长
refreshTimeId = setInterval("refreshReadTime()", 1000);
// 循环执行记录阅读时长
submitTimeId = setInterval("submitReadMinute()",60000);